﻿
@{
    ViewBag.Title = "Part6_2";
    Layout = "~/Views/Shared/_LayoutPart6.cshtml";
}

<div class="con left" style="width:50%;">
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01" style="width:100%;">
            <div class="div_any_child" style="width:98%;position:relative;height: 420px;">
                <div class="div_any_title"><img src="../images/title_13.png">场所检测</div>
                <div id="FactoryArea" style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
                <div id="lineChart1" style="width: 52%;height: 66%;display: inline-block;"></div>
                <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: 2%;top: 8%;">
                    <div style="display: inline-block;width:33%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">检测点数量</div>
                        <div style="color:#87cefa;font-size: 30px;line-height: 42px;">49</div>
                    </div><div style="display: inline-block;width:33%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">工种数量</div>
                        <div style="color:dodgerblue;font-size: 30px;line-height: 42px;">22</div>
                    </div><div style="display: inline-block;width:33%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">检测合格率</div>
                        <div style="color:#ff7f50;font-size: 30px;line-height: 42px;">95%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left div_any01" style="width:48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_14.png"></div>
                <p id="histogramChart2" class="p_chart" style="height: 400px;"></p>

            </div>
        </div>
        <div class="left div_table_box" style="width: 48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_16.png">预警信息</div>
                <div class="table_p">
                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>内容</th>
                                <th>发布时间</th>
                            </tr>
                        </thead>
                        <tbody>
                           
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $("#part6_2").attr("class", "nav_active");

    LoadData();
    function LoadData() {
        setTimeout(function () {
            GetFactoryAreaChart();
            GetJobCountChart();
        }, 2000);
        setInterval(function () {

        }, 30000);
    }
    function GetFactoryAreaChart() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'right'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['大场', '浦东'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 34, name: '大场' },
                        { value: 15, name: '浦东' }
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('FactoryArea'));
        myChart1.setOption(option);
    }


    function GetJobCountChart() {
        var lineChart2 = echarts.init(document.getElementById('lineChart1'));
        lineChart2.setOption({
               color: ['#5bc0de'],
            grid: {
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a}<br/>{b} {c}"
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['钳工', '司炉工', '焊工', '木工', '喷漆工', '塑胶工', '喷砂工', '化铣工', '表面处理工'],
                    axisLine: {
                        lineStyle: {
                            color: '#5bc0de'
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#5bc0de'
                        },
                    },
                    splitLine: {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (value) {
                            return value + ""
                        },
                    },
                }
            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    barWidth: 20,
                    data: [21, 23, 16, 25, 20, 12, 17, 30, 27, 13, 22, 10],
                },
            ]
        })
    }
</script>
